<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "app",
  computed: {
    theme() {
      return this.$store.state.app.system.theme
    }
  },
  watch: {
    theme: {
      handler() {
        this.setTheme()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    setTheme() {
      const theme = this.$store.state.app.system.theme
      const themeClass = `learun-theme-nav-${theme.nav} learun-theme-color-type-${theme.colorType} learun-theme-color-${theme.color}`
      let oldClass = document.getElementsByTagName("body")[0].className
      if (oldClass) {
        let oldClassList = oldClass.split(' ')
        oldClassList = oldClassList.filter(t => t.indexOf('learun-theme-') == -1)
        oldClass = String(oldClassList).replace(',', ' ')
      }
      document.getElementsByTagName("body")[0].className = `${themeClass} ${oldClass}`
    }
  }
};
</script>
<style lang="scss">
@import "./styles/custom.scss";
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.l-load-page {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #f0f0f0;
}

// ERP案例样式
.erpCase {
  .header_name {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }

  .right_right {
    margin-left: 8px;
  }

  .form_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .form_flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .form_information {
    display: flex;
    align-items: center;
  }
  .form_flex_top{
    display: flex;
  }
  .form_margin_top_16 {
    margin-top: 16px;
  }

  .form_name {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }

  .form_top_upload {
    margin-top: 16px;
  }

  .form_div_back {
    // width: 100%;
    margin: 16px;
    padding: 16px;
    background: #F8F8F8;
  }

  .form_margin_16 {
    margin: 16px;
  }

  .form_back {
    background: #F8F8F8;
    padding: 16px;
  }

  .font_size_14 {
    font-size: 14px;
    color: #333333;
  }

  .form_left_32 {
    margin-left: 32px;
    font-size: 14px;
    color: #333333;
  }

  .font_size_14 {
    font-size: 14px;
  }

  .font_color {
    color: #999999;
    font-weight: normal;
  }

  .form_subtitle {
    font-size: 16px;
    font-weight: normal;
    color: #999999;
  }

  .panel_name {
    font-size: 16px;
    font-weight: normal;
    color: #444444;
  }

  .panel_margin_left_20 {
    margin-left: 20px;
  }

  .panel_name_size_18 {
    font-size: 18px;
    font-weight: normal;
    color: #555555;
  }

  .panel_margin_top_25 {
    margin-top: 25px;
  }

  .panel_margin_left_50 {
    margin-left: 50px;
  }

  .panel_margin_left_56 {
    margin-left: 56px;
  }

  .btn_width200_height40 {
    width: 200px;
    height: 40px;
    // line-height: 40px;

    font-weight: normal;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
  }

  .box_border {
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
  }

  .form_wrap {
    flex-wrap: wrap;
  }

  .padding_16 {
    padding: 16px;
  }

  .font_size_24 {
    font-size: 24px;
    font-weight: bolder;
    color: #444444;
  }

  .margin_5 {
    margin: 5px;
  }

  .addBtn {
    float: right;
    margin-top: 10px;
    position: relative;
    z-index: 10;
  }

  .margin_right_3 {
    margin-right: 3px;
  }
}
</style>